<template>
	<m-layout :className="`home${current}`" gap="0 0 124" :goBack="false" barBg="unset" :scrollColor="scrollColor[current]" :scrollTop="scrollTop">
		<view class="" slot="header">
			<m-block gap="15 0" spa="0 24 15" radius="100" className="flex-center"
				@click="Jump('/pagesA/shopping/search/search')">
				<m-icon color="#999" type="icon-fangdajing" wh="33" spa="0 10 0 0"></m-icon>
				<m-text block color="#999">搜索拼团商城好价商品</m-text>
			</m-block>
			<m-block></m-block>
		</view>
		<view class="flex  " slot="back" @click="chooseLocation">
			<m-icon color="#111" type="icon-dingwei" wh="33"></m-icon>
			<view class="topBack otw">
				<m-text className="otw" block color="#111" bold ftsize="28">{{locationAddress || '未选择地址'}}</m-text>
			</view>
			<m-icon color="#111" type="icon-fanhui" wh="33" style="font-weight: 800;" rotate="-90"></m-icon>
		</view>
		<swiper class="swiper-box align-center" indicator-color="#CECECE" indicator-active-color="#CECECE"
			:indicator-dots="false" :autoplay="true" height="303" :interval="4000" :duration="500" circular
			@change="change">
			<swiper-item>
				<m-image src="http://117.24.6.18:5003/static/tzimg/homebanner5-1.png" mode="widthFix" wh="750 290"></m-image>
			</swiper-item>
			<swiper-item>
				<m-image src="http://117.24.6.18:5003/static/tzimg/homebanner3-1.png" mode="widthFix" wh="750 290"></m-image>
			</swiper-item>
			<swiper-item>
				<m-image src="http://117.24.6.18:5003/static/tzimg/homebanner4-1.png" mode="widthFix" wh="750 290"></m-image>
			</swiper-item>
		</swiper>

		<m-block gap="24" spa="30 24 0">
			<view class="align-center flex-around">
				<view class="dl" @click="Jump('/pages/shopping/goodsPage/goodsPage?type=new')">
					<m-image wh="90" src="http://117.24.6.18:5003/static/tzimg/homeMenu1.png" spa="0 15 0 0"></m-image>
					<m-text block>今日推荐</m-text>
				</view>
				<view class="dl" @click="Jump('/pages/shopping/goodsPage/goodsPage?type=hot')">
					<m-image wh="90" src="http://117.24.6.18:5003/static/tzimg/homeMenu2.png" spa="0 15 0 0"></m-image>
					<m-text block>每周上新</m-text>
				</view>
				<view class="dl" @click="Jump('/pagesA/shopping/list/list?wards=2')">
					<m-image wh="90" src="http://117.24.6.18:5003/static/tzimg/homeMenu3.png" spa="0 15 0 0"></m-image>
					<m-text block>折扣专区</m-text>
				</view>
				<view class="dl" @click="Jump('/pages/shopping/goodsPage/goodsPage')">
					<m-image wh="90" src="http://117.24.6.18:5003/static/tzimg/homeMenu4.png" spa="0 15 0 0"></m-image>
					<m-text block>更多分类</m-text>
				</view>
			</view>
		</m-block>

		<m-block className="flex" bgColor="unset" spa="20 24">
			<image class="flex-1" src="http://117.24.6.18:5003/static/tzimg/homeAD1.png" mode="widthFix" />
		</m-block>

		<m-block gap="23 16" spa='20 24' bgColor="linear-gradient(90deg, #85D0FF 0%, #BDE3CC 49%, #FDF144 100%)"
			shadow="inset 0px 0px 5px 1px #fff">
			<view class="flex-between">
				<m-text spa="0 0 20 0 " ftsize="34" bold color="#fff">爆款好物</m-text>
				<m-text spa="0 0 20 0 " ftsize="26"></m-text>
			</view>
			<view class="align-center flex-around">
				<m-block gap="14 8">
					<m-text ftsize="24" className="otw" block>棉柔巾随行装</m-text>
					<m-image spa="10 0" wh="145 90"></m-image>
					<m-button block gap="4 " radius="100" bgColor="linear-gradient(90deg, #8BD2FF 0%, #FBF14B 100%)">
						￥1.9</m-button>
				</m-block>
				<m-block gap="14 8" spa="0 0 0 10">
					<m-text ftsize="24" className="otw" block>棉柔巾随行装</m-text>
					<m-image spa="10 0" wh="145 90"></m-image>
					<m-button block gap="4 " radius="100" bgColor="linear-gradient(90deg, #8BD2FF 0%, #FBF14B 100%)">
						￥1.9</m-button>
				</m-block>
				<m-block gap="14 8" spa="0 0 0 20">
					<m-text ftsize="24" className="otw" block>棉柔巾随行装</m-text>
					<m-image spa="10 0" wh="145 90"></m-image>
					<m-button block gap="4 " radius="100" bgColor="linear-gradient(90deg, #8BD2FF 0%, #FBF14B 100%)">
						￥1.9</m-button>
				</m-block>
				<m-block gap="14 8" spa="0 0 0 20">
					<m-text ftsize="24" className="otw" block>棉柔巾随行装</m-text>
					<m-image spa="10 0" wh="145 90"></m-image>
					<m-button block gap="4 " radius="100" bgColor="linear-gradient(90deg, #8BD2FF 0%, #FBF14B 100%)">
						￥1.9</m-button>
				</m-block>
			</view>
		</m-block>

		<m-block spa="20 24 ">
			<m-tabs fontSize="30rpx" bgColor="#fff" v-model="tabIdx" height="86rpx" :tabs="classifyList"
				color="#666666 " activeColor="#333333" pillsColor="#fff" pillsBorderRadius="26rpx" bg field="tname" />
		</m-block>
		<hot-sale ref="hot" wards="1" :tid="tId" :istop="0" gap="0 24"></hot-sale>
		<!-- <hot-sale ref="hot" wards="2"  :istop="0"></hot-sale> -->
	</m-layout>
</template>

<script>
	import { GetNewsPage } from "@/api/News.js";
	import { GetGoodsTypePage } from '@/api/Goods.js'
	import { GetGoodsPage } from '@/api/Goods.js';
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				bnannerList: [],
				tabIdx: 0,
				scrollTop: 0,
				current: 0,
				scrollColor:{
					0:'#5CBBF7',
					1:'#FF4F13',
					2:'#08CBFD',
				},
			};
		},
		computed: {
			...mapState({
				classifyList: state => state.goods.classifyList,
				config: state => state.general.config,
				locationAddress: state => state.address.locationAddress,
			}),
			tId() {
				return this.classifyList[this.tabIdx]['id']
			},
		},
		watch: {
			locationAddress() {
				this.$nextTick(() => {
					this.$refs.hot.onReset();
				})
			}
		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
		},
		onLoad() {

			// this.getBanner();
			this.init()
		},
		methods: {
			change({ detail: { current } }) {
				this.current = current
			},
			goClassify(key) {
				this.Cookie.set("classifyId", key)
				this.Jump({ url: '/pages/shopping/goodsPage/goodsPage', mode: 4 })

			},
			openServiceChats() {
				this.openServiceChat();
			},
			async init() {
				this.$nextTick(() => {
					this.$refs.hot.getData();
				})
			},
			search() {
				if (!this.search && this.verify) {
					return this.Toast('请输入搜索内容')
				}
				const url = '/pagesA/shopping/search/search'
				const params = this.params ? `?type=${this.params}` : ''
				this.Jump(url + params)
			},

			// 获取banner列表
			async getBanner() {
				const { success, list, msg, code } = await GetNewsPage({
					code: 'banner_goods',
					pageIndex: 1,
					pageSize: 10,
				})
				this.bnannerList = list[0]['picurl'];
			},
		},
		onReachBottom() {
			this.init();
		},
	}
</script>

<style lang="scss">
	.home0 {
		transition: all 0.5s;
		background: url('http://117.24.6.18:5003/static/tzimg/homebanner1.png') #f6f6f6 no-repeat;
		background-size: 750rpx 627rpx;
		/* #ifndef MP-WEIXIN */
		background-position: left -40rpx;
		/* #endif */
	}

	.home1 {
		transition: all 0.5s;
		background: url('http://117.24.6.18:5003/static/tzimg/homebanner3.png') #f6f6f6 no-repeat;
		background-size: 750rpx 627rpx;
		/* #ifndef MP-WEIXIN */
		background-position: left -40rpx;
		/* #endif */
	}

	.home2 {
		transition: all 0.5s;
		background: url('http://117.24.6.18:5003/static/tzimg/homebanner4.png') #f6f6f6 no-repeat;
		background-size: 750rpx 627rpx;
		/* #ifndef MP-WEIXIN */
		background-position: left -40rpx;
		/* #endif */
	}

	.topBack {
		max-width: 400rpx;
		margin: 0 10rpx;
	}

	.search-box {
		padding-bottom: 20rpx;

		.m-input {
			padding: 12rpx 18rpx !important;
			border-radius: 25rpx !important;
			background: #F8F8F8;
		}
	}


	.swiper-box {
		margin: 20rpx 0 !important;
	}

	.menu-box {
		padding: 0 24rpx;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 18rpx;
	}

	.home-ad-share {
		margin: 20rpx 0 0;
		padding: 0 24rpx;

		image {
			width: 100%;
			height: 156rpx;
		}
	}
</style>